import React, { useContext } from 'react'
import Son from '../Son/Son';
//Father组件想要接收GrandFather传递的数据，有两个办法
//办法1：可以通过钩子函数:useContext

//导入GrandFather中暴露的context对象
import { context } from '../GrandFather/GrandFather'

export default function Father(props) {
    //需要接收一个参数
    //这个方法如何接收值，取决于Provider中value值的类型，如果是字符串、布尔值等可以直接用变量来接收
    //反之，如果是数组/对象，一般都会直接解构
    let { user } = useContext(context);
    //解构
    let { name } = props;
    return (
        <div style={{ width: 500, height: 400, border: '1px dashed orange' }}>
            <h3>Father</h3>
            <p>接收来自于GrandFather组件传递的属性数据：姓名-{name}</p>
            <p>接收来自于GrandFather组件传递的属性数据: 用户名-{user}</p>
            <Son></Son>
        </div>
    )
}
